<template>
  <div class="box">

    <!-- table -->
    <div class="page-list">
      <div class="list-top-box">
        <p class="list-top-box-left">
          已选 <span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }} 数据
        </p>
        <div class="list-top-box-right">
          <el-button type="primary" :disabled="multipleSelection.length != 1" @click="editFunc"
            v-if="$isPer(permission, ['projectField_add'])">字段权限配置</el-button>
        </div>
      </div>
      <div class="table-box" v-loading="tableLoading">
        <el-table ref="table" :header-cell-style="{
          background: '#FAFBFC',
          color: '#828A9D',
          textAlign: 'center',
        }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData" highlight-selection-row border
          @select="handleSelectionChange" @row-click="handleHighlightChangeTable" height="100%">
          <el-table-column type="selection" width="80"></el-table-column>
          <el-table-column min-width="180px" prop="id" label="编号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="180px" prop="name" label="职位名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="180px" prop="updated_at" label="更新时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 添加 -->
    <el-dialog :title="`${roleInfoform.name} - 配置字段权限`" :close-on-click-modal="false" :visible.sync="dialogVisible"
      width="990px" :before-close="handleClose">
      <div class="permission-list">
        <el-checkbox-group v-model="roleInfoform.checkedList">
          <div class="item-tr" v-for="(item, index) in roleInfoform.field_data" :key="index + '1'">
            <div class="item1-td">
              <div class="item2-td-name">
                {{ item.name }}
                <!-- <el-checkbox :label="`${index + 1}`" @change="checkAll($event, index)">{{ item.name
                  }}</el-checkbox> -->
              </div>
            </div>
            <div class="item2-td">
              <div class="item2-tr" v-for="(item2, index2) in item.children" :key="index2 + '2'">
                <div class="item2-td-main">
                  <el-tooltip class="item" effect="dark" :content="item2.name" placement="right">
                    <div class="item2-td-name">
                      <el-checkbox :label="`${index + 1}-${index2 + 1}`" @change="checkAll($event, index, index2)">{{
                        item2.name
                        }}</el-checkbox>
                    </div>
                  </el-tooltip>
                </div>
                <div class="item3-td">
                  <template v-for="(item3, index3) in item2.field_list">
                    <div class="item-fun" :key="index3 + '3'">
                      <el-checkbox :label="`${index + 1}-${index2 + 1}-${index3 + 1}`"
                        @change="fieldChange($event, index, index2, index3)">{{ item3.name }}</el-checkbox>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="submitFunc" :loading="roleInfoform.submitBtn">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from '@/api/adminApi'
// import { permission_field } from './dataNew.js'
// import { permission_field } from './data.js'
import { permission_field } from './fieldData.js'

export default {
  name: "projectField",
  data() {
    return {
      tableLoading: false,//列表loading
      tableData: [],//列表数据
      multipleSelection: [],//多选数据
      // 弹窗
      dialogVisible: false,
      roleInfoform: {
        name: '',
        checkedList: [],
        field_data: '',
        submitBtn: false,
      },
      permission: [],//操作权限
    };
  },
  watch: {},
  computed: {
  },
  activated() {
  },
  destroyed() {
    window.onresize = null;
  },
  mounted() {
    this.$getHtmlAuthority(this.$route.path).then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.getList();
    this.permissionFieldFunc();
  },
  methods: {
    // 字段权限字段数据重组
    permissionFieldFunc() {
      permission_field.forEach((item, index) => {
        item.children.forEach((item2, index2) => {
          item2.label = `${index + 1}-${index2 + 1}`;
          item2.field_list.forEach((item3, index3) => {
            item3.label = `${index + 1}-${index2 + 1}-${index3 + 1}`;
          })
        })
      })
      this.roleInfoform.field_data = permission_field;
    },
    editFunc() {
      let item = this.multipleSelection[0];
      this.handleEdit(item)
    },
    handleSelectionChange(e) {
      console.log(e, '选择时间')
      e.forEach((item, index) => {
        if (index == e.length - 1) {
          this.$refs.table.toggleRowSelection(item, true);
        } else {
          this.$refs.table.toggleRowSelection(item, false);
        }
      })
      this.multipleSelection = e[e.length - 1];
    },
    handleHighlightChangeTable(row) {
      this.multipleSelection.forEach(item => {
        this.$refs.table.toggleRowSelection(item, false);
      })
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
      this.multipleSelection = [row];
    },
    /************弹窗操作************/
    // 关闭添加弹窗
    handleClose() {
      // this.roleInfoform = this.$options.data().roleInfoform;
      this.permissionFieldFunc();
      this.dialogVisible = false;
    },
    // 修改
    handleEdit(data) {
      console.log(data, 'handleEdit')
      this.roleInfoform.id = data.id;
      this.roleInfoform.name = data.name;
      if (data.field_permissions) {
        let field_permissions = JSON.parse(data.field_permissions);
        let roleInfoform = this.roleInfoform;
        roleInfoform.checkedList = field_permissions.checkedList;
        roleInfoform.field_data.forEach(item => {
          item.children.forEach(item2 => {
            item2.state = roleInfoform.checkedList.includes(item2.label);
            item2.field_list.forEach(item3 => {
              item3.state = roleInfoform.checkedList.includes(item3.label);
            })
          })
        })
        this.roleInfoform = roleInfoform;
        console.log(roleInfoform.field_data, "roleInfoform.field_data")
      }
      this.dialogVisible = true;
    },
    fieldChange(state, idx, idx2, idx3) {
      console.log(state, idx, idx2, idx3, "state, idx, idx2")
      this.roleInfoform.field_data[idx].children[idx2].field_list[idx3].state = state;
      let allNum = 0;
      this.roleInfoform.field_data[idx].children[idx2].field_list.forEach((item, idx3) => {
        if (item.state) {
          allNum += 1;
        }
      })
      console.log(allNum, "allNum")
      console.log(this.roleInfoform.field_data[idx].children[idx2])
      if (allNum === this.roleInfoform.field_data[idx].children[idx2].field_list.length) {
        let id = `${idx + 1}-${idx2 + 1}`;
        if (!this.roleInfoform.checkedList.includes(id)) {
          this.roleInfoform.field_data[idx].children[idx2].state = true;
          this.roleInfoform.checkedList.push(id);
        }
      } else {
        let id = `${idx + 1}-${idx2 + 1}`;
        if (this.roleInfoform.checkedList.includes(id)) {
          var index = this.roleInfoform.checkedList.indexOf(id);
          this.roleInfoform.field_data[idx].children[idx2].state = false;
          this.roleInfoform.checkedList.splice(index, 1);
        }
      }

    },
    checkAll(state, idx, idx2) {
      console.log(state, idx, idx2, "state, idx")
      let field_data = this.roleInfoform.field_data;
      let field_list = field_data[idx].children[idx2].field_list;
      this.roleInfoform.field_data[idx].state = state;
      if (state) {
        this.setChecked(field_list, idx, idx2);
      } else {
        this.setUnChecked(field_list, idx, idx2);
      }
    },
    // 设置全不选
    setUnChecked(data, idx, idx2) {
      let checkedList = this.roleInfoform.checkedList;
      data.forEach((item, idx3) => {
        let id = `${idx + 1}-${idx2 + 1}-${idx3 + 1}`;
        if (checkedList.includes(id)) {
          var index = checkedList.indexOf(id);
          item.state = false;
          checkedList.splice(index, 1);
        }
      });
      console.log(checkedList, "checkedList")
    },
    // 设置全选
    setChecked(data, idx, idx2) {
      console.log(data, idx, idx2)
      let checkedList = this.roleInfoform.checkedList;
      data.forEach((item, idx3) => {
        let id = `${idx + 1}-${idx2 + 1}-${idx3 + 1}`;
        if (!checkedList.includes(id)) {
          item.state = true;
          checkedList.push(id);
        }
      });
      console.log(checkedList, "checkedList")
    },
    // 修改
    submitFunc() {
      let roleInfoform = this.roleInfoform;
      if (roleInfoform.checkedList.length < 1) {
        this.$message({
          message: "请选择至少一个权限",
          type: "warning",
        });
        return;
      }
      let field_permissions = {};
      roleInfoform.field_data.map((item, index) => {
        item.children.map((item2, index2) => {
          item2.field_list.map((item3, index3) => {
            // if (item3.state) {
            //   field_permissions.push(item3.field_name);
            // }
            field_permissions[item3.field_name] = item3.state;
          })
        })
      })
      console.log(field_permissions, roleInfoform, "参数")
      this.roleInfoform.submitBtn = true;
      adminApi.updOrganization({
        id: roleInfoform.id,
        field_permissions: JSON.stringify({
          field_permissions,
          checkedList: roleInfoform.checkedList
        }),//JSON.stringify(field_permissions)
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.roleInfoform.submitBtn = false;
          this.handleClose();
          this.getList();
        }
      })
    },

    /************end************/
    // 获取列表
    getList() {
      this.tableLoading = true;
      adminApi.getOrganizationList({
        type: 0,
        field_permissions: 1,
        is_enterprise_personnel: 1
      }).then(res => {
        console.log(res, "获取列表数据")
        this.tableLoading = false;
        if (res.code == 200) {
          this.tableData = res.data;
        }
      }).catch(err => {
        this.tableLoading = false;
      })
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/listPage.scss';
</style>